<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    :viewBox="`0 0 ${width} ${height}`"
    style="width: 100%; height: 100%"
  >
    <Point v-for="point in filterOrderData" :key="point.orderNo" :point="point" :crane-no="craneNo" />
  </svg>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { storeToRefs } from 'pinia';

import { useTerminalStore } from '../../store';
import Point from './point.vue';

export default defineComponent({
  name: 'yard-svg',

  props: {
    craneNo: {
      type: String,
      required: true,
    },
  },

  components: {
    Point,
  },

  setup() {
    const terminalStore = useTerminalStore();
    const { filterOrderData } = storeToRefs(terminalStore);

    const width = ref(1000);
    const height = ref(600);

    return { width, height, filterOrderData };
  },
});
</script>
